import { ref,onMounted, onUnmounted } from 'vue';// 导入必要的生命周期钩子
function useMousePosition(){
    const x = ref(0);// 创建响应式对象用于储存坐标
    const y = ref(0);

    // 鼠标点击事件，由于本方法挂载在鼠标点击事件上
    // 所以显式的声明类型为 MouseEvent
    const updatePostion = (e:MouseEvent) => {
        x.value = e.pageX;
        y.value = e.pageY;
    }

    onMounted(()=>{// 加载模块时注册点击事件
        document.addEventListener('click',updatePostion);
    })

    onUnmounted(()=>{// 卸载模块时也卸载方法
        document.removeEventListener('click',updatePostion);
    })

    return {x,y};// 返回响应式对象
}

export default useMousePosition